<template>
  <div>
    <div class="filter-container">
      <div class="title-container">
        <h3 class="apimenu-title">基础用法</h3>
      </div>
      <div style="width: 40%">
        <we-editor
          ref='myEditor'
          :edit-elements="editElements"
          action-url="/"
          :data="data"
          :editHidden="editHidden"
          :disabledKeys="disabledKeys"
          :isParamsData="true"
          :rules="rules"
          :role="currentUserRole"
          @after="after"
          :primary-keys="[]"
          @before="before"
          :doValidate="true"
        >
        </we-editor>
        <div>
          <pre v-highlightjs>
            <code class="javascript">
            <div v-text="htmlTemplateText"></div>
                    export default {
                        data() {
                        return {
                        disabledKeys: {},
                        editHidden: {},
                        editElements: [
                            { key: 'name', label: '活动名称' },
                            { key: 'region', label: '活动区域' },
                            { key: 'merchant', type: 'el-select', label: '选择商户', values: [{ label: '商户1', value: '1' }, { label: '商户2', value: '2' }, { label: '商户3', value: '3' }, { label: '商户4', value: '4' }] },
                            { key: 'merchant2', type: 'el-select-filter', label: '选择商户 - 可检索', values: [{ label: '商户1', value: '1' }, { label: '商户2', value: '2' }, { label: '商户3', value: '3' }, { label: '商户4', value: '4' }] },
                            { key: 'merchant3', type: 'multiselect', label: '选择商户 - 多选', values: [{ label: '商户1', value: '1' }, { label: '商户2', value: '2' }, { label: '商户3', value: '3' }, { label: '商户4', value: '4' }] },
                            { key: 'delivery', type: 'el-switch', label: '即时配送' },
                            { key: 'type1', label: '活动性质', type: 'el-checkbox-group', values: [{ label: '美食/餐厅线上活动', value: '1' }, { label: '地推活动', value: '2' }, { label: '线下主题活动', value: '3' }, { label: '单纯品牌曝光', value: '4' }] },
                            { key: 'type', label: '活动性质', type: 'el-checkbox-group-checkbox', values: [{ label: '美食/餐厅线上活动', value: '1' }, { label: '地推活动', value: '2' }, { label: '线下主题活动', value: '3' }, { label: '单纯品牌曝光', value: '4' }] },
                            { key: 'resource', label: '特殊资源', type: 'el-radio-group', values: [{ label: '线上品牌商赞助', value: '1' }, { label: '线下场地免费', value: '2' }] },
                            { key: 'desc', label: '活动形式', type: 'textarea' },
                            { key: 'desc', label: '提示信息', type: 'el-input-rules', onTextBtn: this.onTextBtn },
                            { key: 'datePicker', label: '日期', type: 'el-date-picker', range: "datetimerange", startPlaceholder: '开始时间', endPlaceholder: '结束时间', rangeSeparator: '至' },
                            { key: 'image', label: '图片', type: 'img' },
                            { key: 'image2', label: '图片2', type: 'el-image', previewClick: () => { } },
                            { key: 'position', label: '位置', type: 'google-map' },
                            {
                            key: 'inputSelect', label: '带搜索按钮的输入框', type: 'input-select', search: (e) => {
                                alert('输入的是:' + e)
                            }
                            },
                            {
                            key: "richText",
                            label: '富文本',
                            type: "input-quill-editor",
                            formStyle: "width: 80%; float: right"
                            }
                        ],
                        data: {
                            datePicker: [],
                            type: [],
                            type1: [],
                            merchant: '1',
                            image2: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                            position: { lng: '', lat: '' },
                        },
                        }
                        }
                    }
            </code>
        </pre>
        </div>
      </div>
    </div>
    <div class="filter-container">
      <div class="title-container">
        <h3 class="apimenu-title">参数类型</h3>
      </div>
      <we-grid
        ref="myGrid"
        :items="uiConfig.paramTypeColumn"
        grid-url="editorParamTypeData"
        operation-width="200px"
      >
      </we-grid>
    </div>
  </div>
</template>
<script>

export default ({
  name: 'editorDemo',
  data () {
    return {
      currentUserRole: 'admin',
      disabledKeys: {},
      htmlTemplateText: `
      <template>
        <we-editor
        ref='myEditor'
        :edit-elements="editElements"
        action-url="/"
        :data="data"
        :editHidden="editHidden"
        :disabledKeys="disabledKeys"
        :isParamsData="true"
        :rules="rules"
        :role="currentUserRole"
        @after="after"
        :primary-keys="[]"
        @before="before"
        :doValidate="true">
        </we-editor>
      </template>`,
      editHidden: {},
      uiConfig: {
        paramTypeColumn: [
          { key: 'param', display: '参数' },
          { key: 'directions', display: '说明' },
          { key: 'type', display: '类型' },
          { key: 'optionalValue', display: '可选值' },
          { key: 'default', display: '默认值' },
        ],
      },
      editElements: [
        { key: 'name', label: '活动名称' },
        { key: 'region', label: '活动区域' },
        { key: 'merchant', type: 'el-select', label: '选择商户', values: [{ label: '商户1', value: '1' }, { label: '商户2', value: '2' }, { label: '商户3', value: '3' }, { label: '商户4', value: '4' }] },
        { key: 'merchant2', type: 'el-select-filter', label: '选择商户 - 可检索', values: [{ label: '商户1', value: '1' }, { label: '商户2', value: '2' }, { label: '商户3', value: '3' }, { label: '商户4', value: '4' }] },
        { key: 'merchant3', type: 'multiselect', label: '选择商户 - 多选', values: [{ label: '商户1', value: '1' }, { label: '商户2', value: '2' }, { label: '商户3', value: '3' }, { label: '商户4', value: '4' }] },
        { key: 'delivery', type: 'el-switch', label: '即时配送' },
        { key: 'type1', label: '活动性质', type: 'el-checkbox-group', values: [{ label: '美食/餐厅线上活动', value: '1' }, { label: '地推活动', value: '2' }, { label: '线下主题活动', value: '3' }, { label: '单纯品牌曝光', value: '4' }] },
        { key: 'type', label: '活动性质', type: 'el-checkbox-group-checkbox', values: [{ label: '美食/餐厅线上活动', value: '1' }, { label: '地推活动', value: '2' }, { label: '线下主题活动', value: '3' }, { label: '单纯品牌曝光', value: '4' }] },
        { key: 'resource', label: '特殊资源', type: 'el-radio-group', values: [{ label: '线上品牌商赞助', value: '1' }, { label: '线下场地免费', value: '2' }] },
        { key: 'desc', label: '活动形式', type: 'textarea' },
        { key: 'desc', label: '提示信息', type: 'el-input-rules', onTextBtn: this.onTextBtn },
        { key: 'datePicker', label: '日期', type: 'el-date-picker', range: 'datetimerange', startPlaceholder: '开始时间', endPlaceholder: '结束时间', rangeSeparator: '至' },
        { key: 'image', label: '图片', type: 'img' },
        { key: 'image2', label: '图片2', type: 'el-image', previewClick: () => { } },
        { key: 'position', label: '位置', type: 'google-map' },
        { key: 'inputSelect',
          label: '带搜索按钮的输入框',
          type: 'input-select',
          search: (e) => {
            // eslint-disable-next-line no-alert
            alert(`输入的是:${ e }`)
          },
        },
        {
          key: 'richText',
          label: '富文本',
          type: 'input-quill-editor',
          formStyle: 'width: 80%; float: right',
        },
      ],
      rules: {},
      data: {
        datePicker: [],
        type: [],
        type1: [],
        merchant: '1',
        image2: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        position: { lng: '', lat: '' },
      },
    }
  },
  methods: {
    onTextBtn () {
      this.$message({ type: 'success', message: 'xxx' })
    },
    after () { },
    before (ts) {
      console.log(ts.data, 'aasdasds')
    },
  },
})
</script>
